<template>
  <div class="container_opera">
    <div class="desc">
      <timeSearch
        @getDateArr="getDateArrRate"
        @changDay="changDayRate"
        :timeArr="timeArrRate"
        :dayActive="this.dayActiveRate"
        :dayLimit="1095"
      />
    </div>
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <chartData></chartData>

    <!-- <el-card style="height: 280px">

            <Echart :chartData="echartData.order" style="height: 280px"></Echart>
        </el-card> -->
    <!-- <div class="ul" @click="addclass" v-for="(item, i) in list" :key="i">
            <div class="li" v-bind:class="{ active: item.active }">{{ item.name }}
            </div>
        </div> -->
  </div>
</template>
    
<script>
let List = [];
List.push({
  newVisitis: [130, 140, 141, 142, 145, 150, 160],
  messages: [120, 82, 91, 154, 162, 140, 145],
  purchases: [80, 100, 121, 104, 105, 90, 100],
  shoppings: [180, 160, 151, 106, 145, 150, 130],
});
// chartData
import chartData from "../chartData";
// import Echart from "@/views/components/echarts/ECharts.vue";
import PanelGroup from "./PanelGroup.vue";
import timeSearch from "./exhaustionDay.vue";
export default {
  components: { timeSearch, PanelGroup, chartData },
  data() {
    return {
      list: [
        { name: "百度", active: true },
        { name: "Bing", active: true },
        { name: "360", active: false },
        { name: "搜狗", active: false },
        { name: "微博", active: false },
      ],
      activeList: ["百度", "Bing"],
      dayActiveRate: 2,
      timeArrRate: [
        // { value: "1", label: "今天" },
        { value: "2", label: "售罄时间定义" },
        // { value: "7", label: "最近7天" },
        // { value: "30", label: "最近30天" },
      ],
      timeGapRate: { startTime: "", endTime: "" },
      echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },
    };
  },

  created() {
    const order = {
      date: [
        "20191001",
        "20191002",
        "20191003",
        "20191004",
        "20191005",
        "20191006",
        "20191007",
      ],
      data: List,
    };
    const xData = order.date;
    const keyArray = Object.keys(order.data[0]);
    const series = [];
    keyArray.forEach((key) => {
      series.push({
        name: key,
        data: order.data.map((item) => item[key]),
        type: "line",
      });
    });
    // const option = {
    //   xAxis: {
    //     data: xData,
    //   },
    //   yAxis: {},
    //   legend: {
    //     data: keyArray,
    //   },
    //   series,
    // };
    console.log(JSON.stringify(xData));
    console.log(JSON.stringify(series));
    this.echartData.order.xData = xData;
    this.echartData.order.series = series;
  },
  mounted() {},
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
      // this.lineChartData = obj
    },
    // 点击切换不同的搜索类型
    addclass: function (e) {
      let spl = this.activeList[0];
      let name = e.target.innerText;
      this.list.forEach((item) => {
        if (item.name === name) {
          item.active = true;
        }
        if (item.name === spl && this.activeList.indexOf(name) < 0) {
          item.active = false;
          this.activeList.push(name); //像数组末尾添加元素
          this.activeList.shift(); //移除数组中的第一个元素
        }
      });
      console.log(JSON.stringify(this.activeList));
    },
    changDayRate(val) {
      this.dayActiveRate = val;
      this.timeGapRate.startTime = val[0];
      this.timeGapRate.endTime = val[1];
    },
    getDateArrRate(value) {
      this.timeGapRate.startTime = value[0];
      this.timeGapRate.endTime = value[1];
      console.log(JSON.stringify(this.timeGapRate));
    },
  },
};
</script>
<style lang="scss" scoped>
.li {
  text-align: center;
  border: 1px solid #007ad8;
  border-radius: 5px;
  color: #007ad8;
  padding: 8px 20px;
  cursor: pointer;

  &.active {
    background-color: rgb(222, 220, 220);
    //   background: url("./img/xuanzhong.png") no-repeat right bottom;
  }
}
</style>
